<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Key Drag Zoom v1.0.4 Reference</title>
    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="../../util/docs/template/local_extensions.css"></link>
  </head>
  <body>
    <h1>Key Drag Zoom</h1>
    <p>
This library adds a drag zoom capability to a Google map. When drag zoom is enabled, holding down a user-defined hot key <code>(shift | ctrl | alt)</code> while dragging a box around an area of interest will zoom the map to that area when the hot key is released.  Only one line of code is needed: <code>GMap2.enableKeyDragZoom();</code> <p> Note that if the map's container has a border around it, the border widths must be specified in pixel units (or as thin, medium, or thick). This is required because of an MSIE limitation.</p>
    <p>For a description and examples of how to use this library, check out the <a href="examples.html">how-to</a>.</p>
    
      <h2><a name="DragZoom"></a>class DragZoom</h2>
      <p>This class represents a drag zoom object for a map. The object is activated by holding down the hot key.This object is created when <code>GMap2.enableKeyDragZoom</code> is called; it cannot be created directly.Use <code>GMap2.getDragZoomObject</code> to gain access to this object in order to attach event listeners.</p>
      
        <h3>Events</h3>
        <table summary="class DragZoom - Events" width="90%">
          
          <tbody>
            <tr>
              <th>Events</th>
              
                
                  <th>Arguments</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>activate</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>This event is fired when the hot key is pressed.</td>
              </tr>
            
              <tr class="even">
                <td><code>deactivate</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>This event is fired while the user release the key</td>
              </tr>
            
              <tr class="odd">
                <td><code>drag</code></td>
                
                  
                    <td><code><span class="type">southwestPixel:GPoint</span>, <span class="type">northeastPixel:GPoint</span></code></td>
                  
                
                <td>This event is repeatedly fired while the user drags the box. The southwest and northeastpoint are passed as parameters of type <code>GPoint</code> (for performance reasons),relative to the map container. Note: the event listener is responsible for converting Pixel to LatLng, if necessary, using<code>GMap2.fromContainerPixelToLatLng</code>.</td>
              </tr>
            
              <tr class="even">
                <td><code>dragend</code></td>
                
                  
                    <td><code><span class="type">newBounds:GLatLngBounds</span></code></td>
                  
                
                <td>This event is fired when the drag operation ends. Note that the event is not fired if the hot key is released before the drag operation ends.</td>
              </tr>
            
              <tr class="odd">
                <td><code>dragstart</code></td>
                
                  
                    <td><code><span class="type">startLatLng:GLatLng</span></code></td>
                  
                
                <td>This event is fired when the drag operation begins.</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="GMap2"></a>class GMap2</h2>
      <p>These are new methods added to the Google Maps API's<a href  = 'http://code.google.com/apis/maps/documentation/reference.html#GMap2'>GMap2</a>class.</p>
      
        <h3>Methods</h3>
        <table summary="class GMap2 - Methods" width="90%">
          
          <tbody>
            <tr>
              <th>Methods</th>
              
                
                  <th>Return&nbsp;Value</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>disableKeyDragZoom()</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Disable drag zoom.</td>
              </tr>
            
              <tr class="even">
                <td><code>enableKeyDragZoom(<span class="type">opt_zoomOpts:KeyDragZoomOptions</span>)</code></td>
                
                  
                    <td><code>None</code></td>
                  
                
                <td>Enable drag zoom. The user can zoom to an area of interest by holding down the hot key<code>(shift | ctrl | alt )</code> while dragging a box around the area.</td>
              </tr>
            
              <tr class="odd">
                <td><code>getDragZoomObject()</code></td>
                
                  
                    <td><code>DragZoom</code></td>
                  
                
                <td>Returns the DragZoom object which is created when <code>GMap2.enableKeyDragZoom</code> is called.With this object you can use <code>GEvent.addListener</code> to attach event listenersfor the 'activate', 'deactivate', 'dragstart', 'drag', and 'dragend' events.</td>
              </tr>
            
              <tr class="even">
                <td><code>keyDragZoomEnabled()</code></td>
                
                  
                    <td><code>Boolean</code></td>
                  
                
                <td>Returns true if the drag zoom feature has been enabled.</td>
              </tr>
            
          </tbody>
        </table>
      
    
      <h2><a name="KeyDragZoomOptions"></a>class KeyDragZoomOptions</h2>
      <p>This class represents the optional parameter passed into <code>GMap2.enableDragBoxZoom</code>.  There is no constructor for this class.  Instead, this class is instantiated as a javascript object literal.</p>
      
        <h3>Properties</h3>
        <table summary="class KeyDragZoomOptions - Properties" width="90%">
          
          <tbody>
            <tr>
              <th>Properties</th>
              
                
                  <th>Type</th>
                
              
              <th>Description</th>
            </tr>
            
              <tr class="odd">
                <td><code>boxStyle</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>the css style of the zoom box.The default is <code>{border: 'thin solid #FF0000'}</code>.Border widths must be specified in pixel units (or as thin, medium, or thick).</td>
              </tr>
            
              <tr class="even">
                <td><code>key</code></td>
                
                  
                    <td><code>String</code></td>
                  
                
                <td>the hot key to hold down to activate a drag zoom, <code>shift | ctrl | alt</code>.The default is <code>shift</code>.</td>
              </tr>
            
              <tr class="odd">
                <td><code>paneStyle</code></td>
                
                  
                    <td><code>Object</code></td>
                  
                
                <td>the css style of the pane which overlays the map when a drag zoom is activated.The default is <code>{backgroundColor: 'white', opacity: 0.0, cursor: 'crosshair'}</code>.</td>
              </tr>
            
          </tbody>
        </table>
      
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
      _uacct = "UA-964209-4";
      urchinTracker();
    </script> 
  </body>
</html>
